import React, { Component } from "react"
import { Route, Link } from "react-router-dom";
import { Flex, WhiteSpace } from 'antd-mobile';
import "./tab.css"
import Discovery from "../components/search/search";
import Sidebar from "../components/sidebar";
import Home from "../components/home/home";

class Tab extends Component {
    constructor() {
        super()
        this.state = {
            flag: false
        }
    }

    goSidebar() {
        this.setState({
            flag: !this.state.flag
        })
    }

    change(flag) {
        this.setState({
            flag: flag
        })
    }

    render() {
        let { flag } = this.state
        return (

            <div >
                <Flex justify="between">

                    <Flex.Item className="content-png"
                        onClick={this.goSidebar.bind(this)}
                    >
                    </Flex.Item>
                    <Flex.Item className="content">
						<Link to="/home">我的</Link>
						<Route path='/home' component={Home} />
					</Flex.Item>
                    <Flex.Item className="content">
                        <Link to="/find">发现</Link>
                        <Route path='/find' component={Discovery} />
                    </Flex.Item>
                    <Flex.Item className="content"><Link to="/movice">视频</Link></Flex.Item>
                    <Flex.Item className="content-search"></Flex.Item>

                </Flex>
                <WhiteSpace size="lg" />
                <div className={flag ? 'reveal' : 'conceal'}>
                    <Sidebar  method={this.change.bind(this)}/>
                </div>
            </div>

        )
    }
}

export default Tab 
